<template>
  <div class="home">
    <header-com :title="title" moduleName="main"></header-com>
    <!-- <banner-com :img='banner'></banner-com> -->
    <van-swipe :autoplay="3000" indicator-color="#43b472">
      <van-swipe-item><img width="100%" height="200px" src="http://qncdn.tissys.com/mobile/static/img/banner/bannerHome_01.jpg" alt=""/></van-swipe-item>
      <!-- <van-swipe-item><img width="100%" height="200px" src="http://qncdn.tissys.com/mobile/static/img/banner/bannerHome_02.jpg" alt=""/></van-swipe-item> -->
    </van-swipe>
    <div class="intro">
      <van-swipe :autoplay="3000" indicator-color="#43b472">
        <van-swipe-item>
          <ul class="introbox">
            <li>
              <div class="icon"><img src="http://qncdn.tissys.com/mobile/static/img/赛事管理.png" /></div>
              <div class="title">赛事发布</div>
              <div class="abstract">发布比赛，查看赛事信息及竞赛规程</div>
            </li>
            <li>
              <div class="icon"><img src="http://qncdn.tissys.com/mobile/static/img/在线报名缴费.png" /></div>
              <div class="title">报名系统</div>
              <div class="abstract">赛事在线报名（单、双、团），微信在线支付即可成功报名</div>
            </li>
            <li>
              <div class="icon"><img src="http://qncdn.tissys.com/mobile/static/img/自动编排.png" /></div>
              <div class="title">智能抽签算法</div>
              <div class="abstract">支持各种赛制一键抽签，智能分区占位，智能同单位回避</div>
            </li>
            <li>
              <div class="icon"><img src="http://qncdn.tissys.com/mobile/static/img/通知发送.png" /></div>
              <div class="title">一键排战</div>
              <div class="abstract">一键安排战表，并一键导出签表(PDF格式)及战表(Excel格式)</div>
            </li>
          </ul>
        </van-swipe-item>
        <van-swipe-item>
          <ul class="introbox">
            <li>
              <div class="icon"><img src="http://qncdn.tissys.com/mobile/static/img/计分系统.png" /></div>
              <div class="title">计分系统（PDA）</div>
              <div class="abstract">裁判赛场计分终端，可记录运动员所有技术情况</div>
            </li>
            <li>
              <div class="icon"><img src="http://qncdn.tissys.com/mobile/static/img/成绩实时统计.png" /></div>
              <div class="title">成绩实时系统</div>
              <div class="abstract">多端智能秒级同步比分信息，随时随地关注比赛进程</div>
            </li>
            <li>
              <div class="icon"><img src="http://qncdn.tissys.com/mobile/static/img/技术统计.png" /></div>
              <div class="title">技术统计</div>
              <div class="abstract">详细且准确的运动员比赛技术数据，助力分析技术特点</div>
            </li>
            <li>
              <div class="icon"><img src="http://qncdn.tissys.com/mobile/static/img/数据分析.png" /></div>
              <div class="title">数据分析</div>
              <div class="abstract">对赛事、裁判、运动员进行全方位多维度数据分析</div>
            </li>
          </ul>
        </van-swipe-item>

      </van-swipe>
    </div>
    <div class="design">
      <!-- <p class='title'>定制与开发</p> -->
      <div class="text" style="font-size:16px;"><b>专业、高效、稳定，为机构量身定制并提供赛事一体化的智能软件服务系统。</b></div>
    </div>
    <ad-box v-for="(item, index, key) in adNeed" :adNeed="item" :key="key"></ad-box>
    <footer-com></footer-com>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: '首页',
      banner: 'http://qncdn.tissys.com/mobile/static/img/banner/bannerHome.png',
      adNeed: [
		  {
		      type:1,
		      img:'http://qncdn.tissys.com/mobile/static/img/design1.png',
		      btn:'在线报名系统',
		      word:['Registration','System'],
		  },
        {
          type: 2,
          img: 'http://qncdn.tissys.com/mobile/static/img/design2.png',
          btn: '智能抽签系统',
          word: ['Intelligent', 'Event']
        },
        {
             type:1,
            img:'http://qncdn.tissys.com/mobile/static/img/design6.png',
            btn:'计分系统（PDA）',
            word:['PDA','System'],
        },
        {
          type: 2,
          img: 'http://qncdn.tissys.com/mobile/static/img/design3.png',
          btn: '多端数据同步',
          word: ['Multi-terminal', 'Data', 'Synchronism']
        },
        {
          type: 1,
          img: 'http://qncdn.tissys.com/mobile/static/img/design4.png',
          btn: '运动技术分析',
          word: ['Sport', 'Technical', 'Analysis']
        }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
.home {
  padding-bottom: 1.1rem;
  .intro {
    margin-bottom: 20px;
    .introbox {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      height: 5.2rem;
      padding-bottom: 1rem;
      li {
        margin-top: 0.3rem;
        width: 50%;
        box-sizing: border-box;
        padding: 0 0.4rem;
        .icon {
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          margin: auto;
          line-height: 1rem;
          border: 0.03rem solid #42b574;
          display: flex;
          align-items: center;
          img {
            display: inline-block;
            width: 50%;
            height: 50%;
            margin: 0 auto;
          }
        }
        .title {
          font-weight: 600;
          height: 0.52rem;
          line-height: 0.52rem;
        }
        .abstract {
          padding: 0 0.2rem;
          font-size: 0.24rem;
        }
      }
    }
  }
  .design {
    margin-bottom: 0.2rem;
    .title {
      font-size: 0.32rem;
      text-align: left;
      font-weight: 600;
      padding: 0 0.4rem 0.2rem 0.4rem;
    }
    .text {
      padding: 0.3rem;
      margin: 0 0.4rem;
      background: url('http://tennis.laigl.com/mobile/static/img/bg_abstract.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;
      line-height: 0.45rem;
      text-align: left;
      font-size: 0.25rem;
      text-indent: 0.5rem;
    }
  }
}
</style>
